<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp"%>       
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>确认支付</title>
        <link rel="stylesheet" href="${ctx }/css/layui.css">
		<script type="text/javascript" src="${ctx }/js/layer-v1.9.2/layer/layer.js"></script>
        <script type="text/javascript" src="${ctx}/js/layer-v1.9.2/layer/layui.js"></script>
		<!-- 二维码生成需要的js库-开始-->
		<!-- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> -->
		<script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
		<!-- 二维码生成需要的js库-结束-->
		<script type="text/javascript" src="${ctx }/js/order/card_pay.js"></script>
	</head>
	<div class="pay bc_pay container">
			<div class="top">
				<a href="${ctx }/" class="logo"><img src="${ctx }/images/logo.png" alt="LOGO" /></a>
				<div class="r">
					<img src="${ctx }/images/zf.png" alt="" />
					<!-- <p>
						<span class="red">购物车</span>
						<span class="red">确认订单</span>
						<span>支付</span>
						<span class="last">完成</span>
					</p> -->
				</div>
			</div>
			<div class="main">
			        <c:forEach var="order" items="${orders}">
						 <input type="hidden" id ="orderId" value="${order.orderId }"/> 
			        </c:forEach>
			        <input type="hidden" id="totalAmount" value="${totalAmount }"/>
			        <input type="hidden" id="qpayCardId" />
			<%-- <i><c:out value="${fn:length(shops)}"></c:out></i> --%>
							<div class="name three">
						   <c:forEach var="shops" items="${shops}">
							   	<c:forEach var="product" items="${shops.products}"  varStatus="productStatus">
							   	    <c:if test="${productStatus.index == 0 }">
							   	            <input type="hidden" id="productName" value="${product.productName }"/>
											<p class="f20 a">${product.productName }
									</c:if>
							   </c:forEach>
						   </c:forEach>
			               <span class="r red">应付：￥${totalAmount }</span></p>
								<p><%-- 卖家昵称：${order.shopName }  --%>(银行卡支付请您在<i class="red">${order_expired_time}</i>完成支付，扫码支付请您在<i class="red">${chan_sweepPay_order_expired_time}</i>完成支付，否则订单会自动取消)</p>
								<%-- <p>请您在<i class="red">${order_expired_time}</i>内完成支付，否则订单会自动取消(以订单详情页为准)</p> --%>
							</div>
				<ul>
					<li class="a">
						<p class="f16 three bank">银行卡支付
							<a href="${ctx}/member/manage_card" class="manage_card" target="_blank">银行卡管理</a>
							<a href="javascript:void(0)" class="add_card" >添加银行卡</a>
							<%-- <span class="r delete"><img src="${ctx }/images/delete1.png" alt="删除" /></span> --%>
						</p>
						<div class="card" >					
						</div>
						<p class="f16 three saoma">第三方扫码支付</p>
						<div class="disanfang" >
							<a href="javascript:;" class="wx">		
							<img src="${ctx}/images/saoma_wx.png" alt="" class="saoma_" />
								<img src="${ctx }/images/gx.png" alt="选中" class="xz"/>
						    </a>
							<a href="javascript:;" class="zfb">
							<img src="${ctx}/images/saoma_zfb.png" alt="" class="saoma_" />
							<img src="${ctx }/images/gx.png" alt="选中" class="xz"/>
							</a>			
						</div>
						<button class="confirm">确认</button>
					</li>
					<!-- <li class="b">
						<a href="">微信支付</a>
					</li>
					<li class="c">
						<a href="zfb_pay.html">支付宝支付</a>
					</li> -->
				</ul>
			</div>		

		</div>
		<!--底部-->
		<%@include file="../common/bottom.jsp"%>
			<div class="mask_layer">
			<div class="step_a">
				<span class="close r"><img src="${ctx }/images/add_del.png" alt="删除" /></span>
				<p class="f16"><img src="${ctx }/images/yhk.png" alt="银行卡" />添加银行卡</p>
				<ul>
				</ul>
			</div>
			<div class="step_b">
				<span class="close r"><img src="${ctx }/images/add_del.png" alt="删除" /></span>
				<p class="f16"><img src="${ctx }/images/yhk.png" alt="银行卡" />添加银行卡</p>
				<form action="" id="addBankCard">
					<p>
						<label for="">开户银行</label>
						<img src="${ctx }/images/bank04.png" alt=""  style="margin: 10px 10px 0 0; border: 1px solid #c1c1c1;"/>
						<input type="hidden"  name ="bankName" id="bankName"/> 
						<input type="hidden" name="instId" id="instId"/>
						<a href="javascript:;" class="other">选择其他银行</a>
					</p>
					<p>
						<label for="">银行卡号</label>
						<input type="text"  name ="cardNumber"  id ="cardNumber"  placeholder="请输入本人银行卡号" required pattern="^(\d{16}|\d{19})$" />
					</p>
					<p>
						<label for="">姓名</label>
						<input type="text" name="realName" id="realName" placeholder="请输入本人姓名" required/>						
					</p>
					<p>
						<label for="">证件</label>
						<input type="text" name="idNumber" id="idNumber" placeholder="请输入本人身份证号码" required pattern="^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$"/>						
					</p>
					<p>
						<label for="">手机</label>
						<input type="tel" name="phone" id ="phone" placeholder="银行预留号码" required pattern="^1(3|4|5|7|8)\d{9}$"/>		
					</p>
					<div class="red prompt">请确保姓名、身份证、银行卡开户人为同一人</div>
					<button>确定添加</button>
				</form>
			</div>
			<div class="step_c">
				<span class="close r"><img src="${ctx }/images/add_del.png" alt="删除" /></span>
				<form action="" >
					<p>
						<label for="">短信验证码</label>
						<input type="text" name="verification_code" id="verification_code" required />						
				        <c:forEach var="order" items="${orders}">
							<input type="hidden" name="out_trade_no" id="out_trade_no" value="${order.orderId }"/>
				        </c:forEach>
						<input type="text" id="yzm" value="获取验证码"  readonly="readonly"/>
					</p>
					<a href="javascript:void(0)"><button>确认支付</button></a>
				</form>
			</div>
			
			<div class="step_d">	
			      <span class="close r"><img src="${ctx }/images/add_del.png" alt="删除" /></span>	 
			      <div id="qrcode" style="width:50%; height:25%; margin-top:23px;"></div>
					             
			</div>
			
			
		</div>
		
	<script type="text/javascript">

		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 200,
			height : 200
		});
	
		function makeCode (url,payType) {	

			$('.mask_layer').css('display','block');
			$('.mask_layer .step_c').css('display','none');
			$('.mask_layer .step_a').css('display','none');
			$('.mask_layer .step_b').css('display','none');
			$('.mask_layer .step_d').css('display','block');
			if (!url) {
			 layer.msg('非法二维码url!',{icon:2,skin: 'layui-layer-red ',offset: ['40%', '45%']});	
			  return;
			}	
            if(payType == '2'){
        		$('.mask_layer .step_d').append('<span style="margin-bottom: 20px;margin-top: 10px;">请使用微信扫描二维码以完成支付</span>');
            }else if(payType == '3'){
        		$('.mask_layer .step_d').append('<span style="margin-bottom: 20px;margin-top: 10px;">请使用支付宝扫描二维码以完成支付</span>');
            }
			qrcode.makeCode(url);
		}

	</script>	
	</body>
</html>
